<template>
  <div class="dashboard-container">

    <el-tag type="danger" v-show="showbind">微信登录的账户请绑定用户名密码</el-tag>
    <el-form ref="form" :model="form" label-width="80px"  v-show="showbind">
      <el-form-item label="用户名">
        <el-input v-model="form.username"></el-input>
      </el-form-item>

      <el-form-item label="密码">
        <el-input v-model="form.password" type="password"></el-input>
      </el-form-item>

      <el-form-item label="昵称">
        <el-input v-model="form.nickname"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">绑定用户</el-button>
      </el-form-item>
    </el-form>
    
    <div class="code">您的一体化入口专属二维码:<br />
    <img :src="picurl2" width="50%" />
    <div>提示：请长按二维码保存本地进行分享</div>
    
      <div class="input_buttom clr" style="margin-bottom:20px">
      <div class="input_buttom_left"><el-input v-model="adurl2" placeholder="" disabled></el-input></div>
      <div class="input_buttom_right"><el-button type="primary"
      v-clipboard:copy="adurl2"
      v-clipboard:success="onCopy"
      v-clipboard:error="onError"
      
      >复制链接</el-button></div>
      </div>


<el-tabs type="border-card">
  <el-tab-pane label="今日统计">
    注册：{{todaytj.regC}} 点击：{{todaytj.clickC}} 分享：{{todaytj.shareC}}
  </el-tab-pane>
  <el-tab-pane label="全部统计">
    注册：{{alltj.regC}} 点击：{{alltj.clickC}} 分享：{{alltj.shareC}}
  </el-tab-pane>
</el-tabs>


    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

import Vue from "vue";
import VueClipboard from "vue-clipboard2";
Vue.use(VueClipboard);

import { getIndexInfo } from "@/api/user";
import { getToken } from "@/utils/auth";
import Cookies from "js-cookie";

// import VueQriously from "vue-qriously";
// Vue.use(VueQriously);

var QRCode = require("qrcode");

export default {
  name: "dashboard",
  computed: {
    ...mapGetters(["name", "roles", "userInfo"])
  },
  data() {
    return {
      adurl: "",
      adurl2: "",
      picurl: "",
      picurl2: "",
      form: {
        username: "",
        password: ""
      },
      showbind: false,
      todaytj: {
        regC: 0,
        clickC: 0,
        shareC: 0
      },
      alltj: {
        regC: 0,
        clickC: 0,
        shareC: 0
      }
    };
  },
  methods: {
    getInfo() {
      getIndexInfo({ token: getToken() })
        .then(res => {
          // console.log(res);
          this.todaytj = res.data.todaytj;
          this.alltj = res.data.alltj;
        })
        .catch(er => {});
    },
    //绑定用户
    onSubmit() {
      this.form.token = getToken();
      this.form.openid = Cookies.get("openid");

      if(!this.form.nickname){
        this.$message("失败!昵称不能为空");
        return;
      }

      this.$store
        .dispatch("bindUser", this.form)
        .then(re => {
          console.log(re);
          //成功就刷新本页
          if (re.succ == 1) {
            window.location.reload();
          }
        })
        .catch(err => {
          console.log(err);
        });
      //this.$message("submit!");
    },
    onCopy: function(e) {
      //alert("You just copied: " + e.text);
      this.$message("复制成功");
    },
    onError: function(e) {
      console.log("Failed to copy texts");
    }
  },
  mounted() {
    this.$nextTick(() => {
      //console.log(this.userInfo);
      console.log(getToken());

      this.getInfo();

      if (this.userInfo.username == "") {
        this.showbind = true;
      }
      this.adurl = "http://www.tripglobal.cn/ad/#/?id=" + this.userInfo.id;
      this.adurl2 = "http://www.tripglobal.cn/m/?unionpid=" + this.userInfo.id;

      QRCode.toDataURL(
        this.adurl,
        { errorCorrectionLevel: "H" },
        (err, url) => {
          this.picurl = url;
          //console.log(url);
        }
      );

      QRCode.toDataURL(
        this.adurl2,
        { errorCorrectionLevel: "H" },
        (err, url) => {
          this.picurl2 = url;
          //console.log(url);
        }
      );
    });
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
<style scoped>
.dashboard-container > div {
  padding: 8px 0;
}
.clr {
  zoom: 1;
}
.clr:after {
  content: "";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
  overflow: hidden;
}
.input_buttom > div {
  float: left;
}
.input_buttom .input_buttom_left {
  width: 75% !important;
}
.input_buttom .input_buttom_right {
  width: 19% !important;
  margin: 0 0 0 1%;
}
.code {
  padding: 20px 0 0 0 !important;
  text-align: center;
  line-height: 40px;
}
.code img {
  width: 60%;
  height: auto;
}
</style>
